<template>
  <div class="home">
    <div class="banner">
      <img src="@img/home/圣诺莉官网—首页_01-11.png" alt="" />
    </div>
    <div class="content">
      <div class="content-set">
        <div class="set-title">三步轻松搞定</div>
        <div class="period">
          <div class="period-title">您的婚期是什么时候?</div>
          <div class="period-list">
            <div
              class="period-item"
              v-for="(item, index) in periodList"
              :key="index"
              :class="{ active: index == tabIndex }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="period" style="width: 200px">
          <div class="period-title">您筹办的婚礼预算是?</div>
          <div class="period-list">
            <div
              class="period-item"
              v-for="(item, index) in budgetList"
              :key="index"
              style="width: 76px"
              :class="{ active: index == budgetIndex }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="period" style="width: 180px">
          <div class="period-title">您预算的婚宴桌是？</div>
          <div class="period-list">
            <div
              class="period-item"
              v-for="(item, index) in tableList"
              :key="index"
              :style="{ width: index == 0 ? '150px' : '63px' }"
              :class="{ active: index == tableIndex }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="set-num">
          <div class="num-tab">
            <div class="tab-items">
              <div class="tab-items-img">
                <img src="@img/home/圣诺莉官网—首页_01-15.png" alt="" />
              </div>
              <div style="margin-top: 5px">发送位置</div>
            </div>
            <div class="tab-items">
              <div class="tab-items-img">
                <img src="@img/home/圣诺莉官网—首页_01-17.png" alt="" />
              </div>

              <div style="margin-top: 5px">查询档案</div>
            </div>
          </div>
          <div class="num-btn">获得报价</div>
        </div>
      </div>
      <div class="content-types">
        <div class="types-item" v-for="(item, index) in typeList" :key="index">
          <img :src="item.imgUrl" alt="" />
          <div class="types-title">
            <div>{{ item.title }}</div>
            <div>{{ item.english }}</div>
          </div>
        </div>
      </div>

      <div class="page-title">婚宴场地</div>

      <div class="field-content">
        <!-- <fieldItem></fieldItem> -->
        <fieldItem
          v-for="(item, index) in fieldItemList"
          :key="index"
          :detail="item"
          :style="{ marginRight: index == 0 ? '10px' : '0' }"
        ></fieldItem>
      </div>
      <div class="page-banner2">
        <img src="@img/home/圣诺莉官网—首页_01-35.png" alt="" />
      </div>
      <div
        class="page-title"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div>婚宴实录</div>
        <div class="look-img" @click="lookFn">查看全部客照</div>
      </div>
      <div class="real-content">
        <!-- <realItem style="margin-right: 10px"></realItem> -->
        <realItem
          v-for="(item, index) in realItemList"
          :key="index"
          :style="{ marginRight: index == 0 ? '10px' : '0' }"
          :detail="item"
        ></realItem>
      </div>
      <div class="page-title">品牌介绍</div>
      <div class="brand-content">
        <brandIem
          v-for="(item, index) in brandList"
          :key="index"
          :detail="item"
        ></brandIem>
      </div>
    </div>
  </div>
</template>
<script>
import fieldItem from "@/components/index/field.vue";
import realItem from "@/components/index/real.vue";
import brandIem from "@/components/index/brand.vue";
import listImg1 from "@img/home/圣诺莉官网—首页_01-03 2.png";
import listImg2 from "@img/home/圣诺莉官网—首页_01-20.png";
import listImg3 from "@img/home/圣诺莉官网—首页_01-22.png";
import listImg4 from "@img/home/圣诺莉官网—首页_01-24.png";

import listImg5 from "@img/home/圣诺莉官网—首页_01-32.png";
import listImg6 from "@img/home/圣诺莉官网—首页_01-38.png";
import listImg7 from "@img/home/圣诺莉官网—首页_01-40.png";

import listImg8 from "@img/home/圣诺莉官网—首页_01-44.png";
import listImg9 from "@img/home/圣诺莉官网—首页_01-03 2.png";
import listImg10 from "@img/home/圣诺莉官网—首页_01-32.png";

import listImg11 from "@img/home/圣诺莉官网—首页_01-47.png";
import listImg12 from "@img/home/圣诺莉官网—首页_01-03 2.png";
import listImg13 from "@img/home/圣诺莉官网—首页_01-32.png";
export default {
  data() {
    return {
      periodList: [
        {
          title: "今年",
        },
        {
          title: "明年",
        },
        {
          title: "待定",
        },
      ],
      budgetList: [
        {
          title: "10万一下",
        },
        {
          title: "10-20万",
        },
        {
          title: "20万以上",
        },
        {
          title: "面谈",
        },
      ],
      tableList: [
        {
          title: "10桌（含）以下",
        },
        {
          title: "10-20桌",
        },
        {
          title: "20桌以上",
        },
      ],
      typeList: [
        {
          title: "婚礼造梦师",
          english: "WEDDING DREAM MAKER",
          imgUrl: listImg1,
        },
        {
          title: "婚纱礼服",
          english: "WEDDING DRESSES",
          imgUrl: listImg2,
        },
        {
          title: "宴会佳宴>",
          english: "BANQUETS",
          imgUrl: listImg3,
        },
        {
          title: "摄像摄影>",
          english: "VIDEOGRAPHY PHO TOGRAPHY",
          imgUrl: listImg4,
        },
      ],
      tabIndex: 0,
      brandList: [
        {
          title: "圣诺莉婚礼艺术中心（浦东店）",
          desc: "--坐落于浦东新区上南路，周边交通便捷畅达。以独特的主题为特色，让每一位宾客仿若置身于美妙的情境之中。内部拥有挑高10米的无柱豪华会厅，配备 3D 全息投影、堪比演唱会级别的舞美、灯光、音响设计。再加上神圣唯美的专属仪式堂，独立而优美的草坪以及舒适的休息空间，致力于为新人们打造一场永生难忘的结婚盛典，让他们的爱情在这梦幻的场景中璀璨绽放。",
          img1: listImg8,
          // img2: listImg9,
          // img3: listImg10,
        },
        {
          title: "圣诺莉婚礼艺术中心（广丰店）",
          desc: "--坐落于广丰区上广公路，周边交通便捷畅达。以独特的主题为特色，让每一位宾客仿若置身于美妙的情境之中。内部拥有挑高10米的无柱豪华会厅，配备 3D 全息投影、堪比演唱会级别的舞美、灯光、音响设计。再加上神圣唯美的专属仪式堂，独立而优美的草坪以及舒适的休息空间，致力于为新人们打造一场永生难忘的结婚盛典，让他们的爱情在这梦幻的场景中璀璨绽放。",
          img1: listImg11,
        },
      ],

      fieldItemList: [
        {
          title: "圣诺莉婚礼艺术中心（浦东店）",
          discount: "优惠：到店礼赠小米家电（限情侣首次）三选一",
          characteristic: "特色：360度全景象3D全息",
          num: "2688-11988元/桌",
          num1: "10-40桌",
          imgUrl: listImg5,
        },
        {
          title: "圣诺莉婚礼艺术中心（广丰店）",
          discount: "优惠：到店礼赠小米家电（限情侣首次）三选一",
          characteristic: "特色：360度全景象3D全息",
          num: "2688-11988元/桌",
          num1: "10-40桌",
          imgUrl: listImg5,
        },
      ],
      realItemList: [
        {
          title: "云中长安主题婚礼",
          desc: "婚礼主题客片",
          imgUrl: listImg6,
        },
        {
          title: "精灵花园主题婚礼",
          desc: "婚礼主题客片",
          imgUrl: listImg7,
        },
      ],
      budgetIndex: 0,
      tableIndex: 0,
    };
  },
  components: {
    fieldItem,
    realItem,
    brandIem,
  },
  mounted() {},
  methods: {
    lookFn() {
      this.$router.push("/guest");
    },
  },
};
</script>
<style lang="less" scoped>
@import url("@css/index");
.active {
  background: #95774f;
  color: #fff;
}
.home {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .banner {
    width: 100%;
    // height: 500px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content {
    width: 1081px;
    .dis-cen();
    margin-top: -80px;
    color: #fff;
    flex-direction: column;
    .content-set {
      width: 100%;
      .alin-contenr();
      margin-bottom: @marginwidth;
      height: 160px;
      background: #c2ac8d;
      justify-content: space-between;

      .set-title {
        font-weight: 400;
        font-size: 30px;
        color: #ffffff;
        text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.65);
        padding-left: 10px;
      }
      .period {
        .alin-contenr();
        flex-direction: column;
        margin: 0 15px;
        .period-title {
          font-size: 16px;
          font-weight: 700;
        }
        .period-list {
          .alin-contenr();
          flex-wrap: wrap;

          div {
            .dis-cen();
            font-size: 15px;
            border: 2px solid #fff;
            margin: 5px;
            padding: 0 5px;
          }
        }
      }
      .set-num {
        width: 190px;
        height: 150px;
        background: #95774f;
        float: right;
        padding: 10px;
        box-sizing: border-box;
        .num-tab {
          .alin-contenr();

          .tab-items {
            padding: 0 10px;
            border-right: 2px solid #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .tab-items-img {
              width: 50px;
              height: 50px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .tab-items:last-child {
            border-right: none;
          }
        }
        .num-btn {
          margin-top: 10px;
          padding: 5px 0;
          background: @backBg1;
        }
      }
    }
    .content-types {
      .alin-contenr();
      justify-content: space-between;
      margin-bottom: 30px;
      .types-item {
        width: 265px;
        margin-right: @marginwidth;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        // /* 加载背景图 */
        // background-image: url("@img/home/圣诺莉官网—首页_01-03 2.png");
        // /* 背景图垂直、水平均居中 */
        // background-position: center center;
        // /* 背景图不平铺 */
        // background-repeat: no-repeat;
        // /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        // background-attachment: fixed;
        // /* 让背景图基于容器大小伸缩 */
        // background-size: cover;

        img {
          width: 100%;
          height: 100%;
          // object-fit: fill;
          // object-fit: contain;
          // object-fit: scale-down;
        }

        .types-title {
          position: absolute;
          background: #ffffff;
          opacity: 0.8;
          color: #000;
          padding: 10px 25px;
        }
      }
      .types-item:last-child {
        margin-right: 0;
      }
    }
    .page-title {
      width: 100%;
      padding: 20px 0;
      color: @pageTitle;
      display: flex;
      align-items: flex-start;
      border-top: 2px solid @backBg;
      border-bottom: 2px solid @backBg;
      margin-bottom: @contentBottom;
      font-size: 20px;
      font-weight: 800;
      .look-img {
        font-family: SourceHanSansSC;
        font-weight: 500;
        font-size: 20px;
      }
    }
    .field-content {
      width: 100%;
      .alin-contenr();
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .page-banner2 {
      height: 300px;
      width: 100%;
      background: @pageTitle;
      margin-bottom: @contentBottom;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .real-content {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: @contentBottom;
    }
    .brand-content {
      padding-left: 330px;
    }
  }
}
</style>
